<div>
    <%_ var keyPrefix = angularAppName + '.'+ entityTranslationKey + '.'; _%>
    <h2><span jhiTranslate="<%= keyPrefix %>home.title"><%= entityClassPluralHumanized %></span>
        <button class="btn btn-primary float-xs-right create-<%= entityUrl %>" [routerLink]="['/', { outlets: { popup: ['<%= entityUrl %>-new'] } }]">
            <span class="fa fa-plus"></span>
            <span <% if (searchEngine == 'elasticsearch') { %>class="hidden-sm-down" <% } %> jhiTranslate="<%= keyPrefix %>home.createLabel">
            Create new <%= entityClassHumanized %>
            </span>
        </button></h2>
    <jhi-alert></jhi-alert>

    <div class="container-fluid">
        <div class="row">
            <%_ if (searchEngine == 'elasticsearch') { _%>
            <div class="col-xs-8 no-padding-right">
                <form name="searchForm" class="form-inline">
                    <div class="input-group pull-right">
                        <input type="text" class="form-control" [(ngModel)]="currentSearch" id="currentSearch" name="currentSearch" placeholder="<% if (enableTranslation) { %>{{ '<%= keyPrefix %>home.search' | translate }}<% } else { %>Query<% } %>">
                        <span  class="input-group-btn width-min">
                            <button class="btn btn-info" (click)="search(currentSearch)">
                                <span class="fa fa-search"></span>
                            </button>
                        </span>
                        <span class="input-group-btn width-min" *ngIf="currentSearch">
                            <button class="btn btn-info" (click)="clear()">
                                <span class="fa fa-trash-o"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
            <%_ } _%>
        </div>
    </div>
    <br/>
    <div class="table-responsive" *ngIf="<%=entityInstancePlural %>">
        <table class="table table-striped">
            <thead>
            <tr<% if (pagination != 'no') { %> jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="<%=pagination != 'infinite-scroll' ? 'transition.bind(this)' : 'reset.bind(this)'%>"<% } %>>
            <th<% if (pagination != 'no') { %> jhiSortBy="id"<% } %>><span jhiTranslate="global.field.id">ID</span><% if (pagination != 'no') { %> <span class="fa fa-sort"></span><% } %></th>
            <%_ for (idx in fields) { _%>
            <th<% if (pagination != 'no') { %> jhiSortBy="<%= fields[idx].fieldName%>"<% } %>><span jhiTranslate="<%=keyPrefix + fields[idx].fieldName %>"><%= fields[idx].fieldNameHumanized %></span><% if (pagination != 'no') { %> <span class="fa fa-sort"></span><% } %></th>
            <%_ } _%>
            <%_ for (idx in relationships) { _%>
            <%_ if (relationships[idx].relationshipType == 'many-to-one'
            || (relationships[idx].relationshipType == 'one-to-one' && relationships[idx].ownerSide == true)
            || (relationships[idx].relationshipType == 'many-to-many' && relationships[idx].ownerSide == true && pagination == 'no')) {
            var fieldName = dto == 'no' ? "." + relationships[idx].otherEntityField : relationships[idx].otherEntityFieldCapitalized;_%>
            <th<% if (pagination != 'no') { %> jhiSortBy="<%=relationships[idx].relationshipName + (fieldName)%>"<% } %>><span jhiTranslate="<%= keyPrefix + relationships[idx].relationshipName%>"><%= relationships[idx].relationshipNameHumanized %></span><% if (pagination != 'no') { %> <span class="fa fa-sort"></span><% } %></th>
            <%_ } _%>
            <%_ } _%>
            <th></th>
            </tr>
            </thead>
            <tbody<% if (pagination == 'infinite-scroll') { %> infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0"<% } %>>
            <tr *ngFor="let <%=entityInstance %> of <%=entityInstancePlural %> ;trackBy: trackId">
                <td><a [routerLink]="['../<%= entityUrl %>', <%= entityInstance %>.id ]">{{<%=entityInstance %>.id}}</a></td>
                <%_ for (idx in fields) {
                var fieldName = fields[idx].fieldName;
                var fieldNameCapitalized = fields[idx].fieldNameCapitalized;
                var fieldType = fields[idx].fieldType;
                var fieldTypeBlobContent = fields[idx].fieldTypeBlobContent; _%>
                <%_ if ((fieldType == 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent == 'image') { _%>
                <td>
                    <a *ngIf="<%= entityInstance %>.<%= fieldName %>" (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
                        <img [src]="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 30px;" alt="<%=entityInstance %> image"/>
                    </a>
                    <span *ngIf="<%= entityInstance %>.<%= fieldName %>">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                </td>
                <%_ } else if ((fieldType === 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent == 'any') { _%>
                <td>
                    <a *ngIf="<%= entityInstance %>.<%= fieldName %>" (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" jhiTranslate="entity.action.open">open</a>
                    <span *ngIf="<%= entityInstance %>.<%= fieldName %>">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                </td>
                <%_ } else if (fields[idx].fieldIsEnum) { _%>
                <td jhiTranslate="{{'<%= angularAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %>}}">{{<%= entityInstance %>.<%= fieldName %>}}</td>
                <%_ } else if (fieldType == 'ZonedDateTime') { _%>
                <td>{{<%=entityInstance %>.<%=fieldName%> | date:'medium'}}</td>
                <%_ } else if (fieldType == 'LocalDate') { _%>
                <td>{{<%=entityInstance %>.<%=fieldName%> | date:'mediumDate'}}</td>
                <%_ } else { _%>
                <td>{{<%=entityInstance %>.<%=fieldName%>}}</td>
                <%_ } _%>
                <%_ } _%>
                <%_ for (idx in relationships) {
                var relationshipType = relationships[idx].relationshipType;
                var ownerSide = relationships[idx].ownerSide;
                var relationshipFieldName = relationships[idx].relationshipFieldName;
                var relationshipFieldNamePlural = relationships[idx].relationshipFieldNamePlural;
                var otherEntityName = relationships[idx].otherEntityName;
                var otherEntityStateName = relationships[idx].otherEntityStateName;
                var otherEntityField = relationships[idx].otherEntityField;
                var otherEntityFieldCapitalized = relationships[idx].otherEntityFieldCapitalized; _%>
                <%_ if (relationshipType == 'many-to-one'
                || (relationshipType == 'one-to-one' && ownerSide == true)
                || (relationshipType == 'many-to-many' && ownerSide == true && pagination == 'no')) { _%>
                <td>
                    <%_ if (otherEntityName == 'user') { _%>
                        <%_ if (relationshipType == 'many-to-many') { _%>
                    <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                            {{<%= relationshipFieldName %>.<%= otherEntityField %>}}{{last ? '' : ', '}}
                        </span>
                        <%_ } else { _%>
                            <%_ if (dto == 'no') { _%>
                    {{<%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %>}}
                            <%_ } else { _%>
                    {{<%= entityInstance + "." + relationshipFieldName + otherEntityFieldCapitalized %>}}
                            <%_ } _%>
                        <%_ } _%>
                    <%_ } else { _%>
                        <%_ if (relationshipType == 'many-to-many') { _%>
                    <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                            <a class="form-control-static" [routerLink]="['../<%= otherEntityStateName %>', <%= relationshipFieldName %>?.id ]">{{<%= relationshipFieldName %>.<%= otherEntityField %>}}</a>{{last ? '' : ', '}}
                        </span>
                        <%_ } else { _%>
                            <%_ if (dto == 'no') { _%>
                    <div *ngIf="<%= entityInstance + "." + relationshipFieldName %>">
                        <a [routerLink]="['../<%= otherEntityStateName %>', <%= entityInstance + "." + relationshipFieldName + "?.id" %> ]" >{{<%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %>}}</a>
                    </div>
                        <%_ } else { _%>
                    <div *ngIf="<%= entityInstance + "." + relationshipFieldName + "Id" %>">
                        <a [routerLink]="['../<%= otherEntityStateName %>', <%= entityInstance + "." + relationshipFieldName + "Id" %> %> ]" >{{<%= entityInstance + "." + relationshipFieldName + otherEntityFieldCapitalized %>}}</a>
                    </div>
                            <%_ } _%>
                        <%_ } _%>
                    <%_ } _%>
                </td>
                <%_ } _%>
                <%_ } _%>
                <td class="text-xs-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['../<%= entityUrl %>', <%= entityInstance %>.id ]"
                                class="btn btn-info btn-sm">
                            <span class="fa fa-eye"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: '<%= entityUrl %>/'+ <%= entityInstance %>.id + '/edit'} }]"
                                replaceUrl="true"
                                class="btn btn-primary btn-sm">
                            <span class="fa fa-pencil"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: '<%= entityUrl %>/'+ <%= entityInstance %>.id + '/delete'} }]"
                                replaceUrl="true"
                                class="btn btn-danger btn-sm">
                            <span class="fa fa-remove"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <%_ if (databaseType !== 'cassandra') { _%>
        <%_ if (pagination == 'pager') { _%>
        <!-- Pager is not implemented yet, so this is normal pagination instead -->
        <div class="text-xs-center" *ngIf="<%=entityInstancePlural %> && <%=entityInstancePlural %>.length">
            <jhi-item-count [page]="page" [total]="queryCount" [itemsPerPage]="itemsPerPage"></jhi-item-count>
            <ngb-pagination [collectionSize]="totalItems" [(page)]="page"  (pageChange)="loadPage(page)"></ngb-pagination>
        </div>
        <%_ } else if (pagination == 'pagination') { _%>
        <div class="text-xs-center" *ngIf="<%=entityInstancePlural %> && <%=entityInstancePlural %>.length">
            <jhi-item-count [page]="page" [total]="queryCount" [itemsPerPage]="itemsPerPage"></jhi-item-count>
            <ngb-pagination [collectionSize]="totalItems" [(page)]="page" (pageChange)="loadPage(page)"></ngb-pagination>
        </div>
        <%_ } _%>
    <%_ } _%>
</div>
